import React, { useState, useLayoutEffect } from 'react';
import { Route, Routes } from 'react-router-dom'
import routes from "../router/index"
import { useSelector, useDispatch } from 'react-redux';
import { initTheme } from '../store';
function Index() {
  const isDark = useSelector(state => state.theme.isDark);
  const dispatch = useDispatch();
  useLayoutEffect(() => {
    dispatch(initTheme());
  }, [])
  const renderRoutes = (routeList) => {
    return routeList.map((item, index) => {
      if (item.children) {
        return (
          <Route
            key={index}
            path={item.path}
            element={item.element}
          >
            {renderRoutes(item.children)}
          </Route>
        )
      } else {
        return (
          <Route
            key={index}
            path={item.path}
            element={item.element}
            index={item.index} // 使用 index
          />
        )
      }
    })
  }

  return (
    <div className={isDark ? 'dark-theme' : 'light-theme'}>
      <Routes>
        {renderRoutes(routes)}
      </Routes>
    </div>
  )
}

export default Index;